<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from 'vue'
import { ElDialog, ElMessage } from 'element-plus'
import SytPageEditor, { config } from '@/components/SytPageEditor/SytPageEditor'
import { useUserStore } from '@/store/user'

config.baseUrl = 'http://localhost:8080'
config.token = useUserStore().token

const editorRef = ref()
const dialogVisible = ref(false)

const openDialog = () => {
  dialogVisible.value = true

  nextTick(() => {
    editorRef.value.setData(localStorage.getItem('SytPageEditorAllPages'))
  })
}

const onChange = (pageStr, allPagesStr) => {
  try {
    localStorage.setItem('SytPageEditorAllPages', allPagesStr)
  } catch (e) {
    if (e.name == 'QuotaExceededError')
      ElMessage({
        message: 'localStlocorage存储超额',
        type: 'error'
      })
  }
}
</script>

<template>
  <div class="container">
    <el-card class="card-button" @click="openDialog">
      <template #header>
        <span class="card-title">低代码页面编辑器</span>
      </template>
      <p class="card-content">拖拽编辑页面</p>
    </el-card>
    <ElDialog v-model="dialogVisible" fullscreen destroy-on-close :show-close="false">
      <div class="editor-body">
        <SytPageEditor ref="editorRef" @change="onChange" @exit="dialogVisible = false">
        </SytPageEditor>
      </div>
    </ElDialog>
  </div>
</template>

<style scoped>
.card-button {
  cursor: pointer;
  width: 200px;
}
.card-title {
  color: var(--el-color-primary);
  font-weight: bold;
}
.card-content {
  color: #888;
}
.editor-body {
  width: 100vw;
  height: 100vh;
}
:deep(.el-dialog) {
  padding: 0;
}
:deep(.el-dialog__header) {
  display: none;
}
</style>
